<template>
	<div>
		<cus-modal
			ref="modal"
			:title="form.name"
			@on-visible-change="onVisibleChange"
			width="1500"
		>
			<Form
				ref="formValidate"
				:model="detailForm"
				:label-width="120"
				label-position="top"
				class="foodComposition"
			>
				<FormItem
					v-for="(item, index) in columns"
					:label="item.title"
					:key="index"
				>
					<Input v-model="detailForm[item.key]"
						><span slot="append">{{ item.unit }}</span></Input
					>
				</FormItem>
			</Form>
			<div slot="footer">
				<div class="modal-footer">
					<cus-button type="primary" size="small" @onClick="onCancel"
						>确认</cus-button
					>
				</div>
			</div>
		</cus-modal>
	</div>
</template>

<script>
export default {
	name: 'addSupplier',
	data() {
		return {
			form: {
				name: ''
			},
			detailForm: {},
			columns: [
				{
					title: '可食部',
					minWidth: 200,
					key: 'eatable',
					align: 'center',
					unit: '%'
				},
				{
					title: '水分含量',
					minWidth: 200,
					key: 'water',
					align: 'center',
					unit: '克'
				},
				{
					title: '能量',
					minWidth: 200,
					key: 'energy',
					align: 'center',
					unit: '千卡'
				},
				{
					title: '蛋白质',
					minWidth: 200,
					key: 'pr',
					align: 'center',
					unit: '克'
				},
				{
					title: '脂肪',
					minWidth: 200,
					key: 'fat',
					align: 'center',
					unit: '克'
				},
				{
					title: '碳水化合物',
					minWidth: 200,
					key: 'carbohydrate',
					align: 'center',
					unit: '克'
				},
				{
					title: '膳食纤维',
					minWidth: 200,
					key: 'dietaryFiber',
					align: 'center',
					unit: '克'
				},
				{
					title: '胆固醇',
					minWidth: 200,
					key: 'cholesterol',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '灰分',
					minWidth: 200,
					key: 'ash',
					align: 'center',
					unit: '克'
				},
				{
					title: '维A',
					minWidth: 200,
					key: 'va',
					align: 'center',
					unit: '微克'
				},
				{
					title: '维B1',
					minWidth: 200,
					key: 'vb1',
					align: 'center',
					unit: '微克'
				},
				{
					title: '维B2',
					minWidth: 200,
					key: 'vb2',
					align: 'center',
					unit: '微克'
				},
				{
					title: '维pp',
					minWidth: 200,
					key: 'vpp',
					align: 'center',
					unit: '微克'
				},
				{
					title: '叶酸',
					minWidth: 200,
					key: 'folacin',
					align: 'center',
					unit: '微克'
				},
				{
					title: '维C',
					minWidth: 200,
					key: 'vc',
					align: 'center',
					unit: '微克'
				},
				{
					title: '维E',
					minWidth: 200,
					key: 've',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '钙',
					minWidth: 200,
					key: 'calcium',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '磷',
					minWidth: 200,
					key: 'phosphorus',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '钾',
					minWidth: 200,
					key: 'potassium',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '钠',
					minWidth: 200,
					key: 'sodium',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '镁',
					minWidth: 200,
					key: 'magnesium',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '铁',
					minWidth: 200,
					key: 'iron',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '锌',
					minWidth: 200,
					key: 'zinc',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '硒',
					minWidth: 200,
					key: 'selenium',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '铜',
					minWidth: 200,
					key: 'copper',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '锰',
					minWidth: 200,
					key: 'manganese',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '碘',
					minWidth: 200,
					key: 'iodine',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '异亮氨酸',
					minWidth: 200,
					key: 'abnormallyHighArginine',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '亮氨酸',
					minWidth: 200,
					key: 'leucineGlycylglycine',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '赖氨酸',
					minWidth: 200,
					key: 'lysine',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '蛋氨酸',
					minWidth: 200,
					key: 'met',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '苯丙氨酸',
					minWidth: 200,
					key: 'phenylalanine',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '苏氨酸',
					minWidth: 200,
					key: 'threonine',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '色氨酸',
					minWidth: 200,
					key: 'tryptophan',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '组氨酸',
					minWidth: 200,
					key: 'histidine',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '总脂肪酸',
					minWidth: 200,
					key: 'totalFattyAcids',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '饱和脂肪酸',
					minWidth: 200,
					key: 'saturatedFattyAcid',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '单不饱和脂肪酸',
					minWidth: 200,
					key: 'monounsaturated',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '多和脂肪酸',
					minWidth: 200,
					key: 'polyunsaturated',
					align: 'center',
					unit: '毫克'
				},
				{
					title: '未知脂肪酸',
					minWidth: 200,
					key: 'unknownFattyAcids',
					align: 'center',
					unit: '毫克'
				}
			]
		}
	},
	methods: {
		onVisibleChange(v) {
			this.$refs['formValidate'].resetFields()
		},
		onCancel() {
			this.$refs['modal'].show = false
		},
		show() {
			this.$refs['modal'].show = true
			console.log(this.form.date)
		}
	}
}
</script>

<style scoped lang="less">
.foodComposition {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	.ivu-input-wrapper {
		width: 120px;
	}
}
::v-deep .ivu-form-item-content {
	margin-left: 0px !important;
	margin-right: 20px;
}
::v-deep .ivu-form-item-label {
	justify-content: flex-start !important;
}
</style>
